<template>
  <div class="app-container" style="padding:10px 60px;">
    <el-row>
      <el-col :span="24" style="font-size: 20px;">
        <el-button style="float: right;margin-top: -3px;" class="fullButton" @click="toggleFullScreen" type="text"
                   icon="el-icon-full-screen"></el-button>
        <div style="float: right;margin-right: 2vw;" :style="{color:countdown<4?'red':'green'}">
          {{ countdown }}秒
        </div>
        <div style="float: left;">
          <dict-tag :options="dict.type.grade" :value="paper.grade"/>
        </div>
        <div style="float: left;">
          <dict-tag :options="dict.type.subject" :value="paper.subject"/>
        </div>
      </el-col>
      <el-col :span="24" style="font-size: 4vw;text-align: center;line-height: 5vw;">{{ paper.name }}</el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
        <div v-show="answerNumber>=topicList.length" style="font-size: 80px;text-align: center;padding-top: 50px;">已完成
        </div>
        <transition-group>
          <div v-for="topic in topicList" :key="topic.topicId"
               v-show="showNumber==topic.number && answerNumber<topicList.length">
            <div style="font-size: 2vw;height: 5vw;">
              <dict-tag :options="dict.type.answer_type" :value="topic.answerType" style="float: left;"/>
              <span style="float: left;margin-top: 0px;"> 【</span>
              <dict-tag :options="dict.type.question_type" :value="topic.questionType" style="float: left;"/>
              <span style="float: left;margin-top: 0px;">】 {{ showNumber }} / {{ topicTotal }}</span>
            </div>
            <div style="float: right;">
              <el-button size="mini" type="warning" @click="showAnswer=!showAnswer" :disabled="showAnswer"
                         style="font-size: 2vw;margin-top: -40px;">答案
              </el-button>
              <el-button size="mini" type="primary" @click="pre" :disabled="showNumber<=1"
                         style="font-size: 2vw;margin-top: -40px;">上一个
              </el-button>
              <el-button size="mini" type="primary" @click="nex" :disabled="showNumber>=topicList.length"
                         style="font-size: 2vw;margin-top: -40px;">下一个
              </el-button>
            </div>
            <hr>
            <div style="font-size: 3vw;margin: 3vw 0">{{ topic.number }} 、 {{ topic.name }}</div>
            <el-row v-show="topic.questionType=='2'" style="font-size: 40px;">
              <el-col :span="6">A：{{ topic.optionA }}</el-col>
              <el-col :span="6">B：{{ topic.optionB }}</el-col>
              <el-col :span="6">C：{{ topic.optionC }}</el-col>
              <el-col :span="6">D：{{ topic.optionD }}</el-col>
            </el-row>
            <hr style="margin: 2vw 0">
            <div v-show="showAnswer" style="font-size: 3vw;text-align: center;">
              <p v-html="topic.answer" style="white-space: pre-line;margin: 0;"></p>
            </div>
          </div>
        </transition-group>
      </el-col>
      <el-col :span="6" style="padding-left: 4vw;">
        <div v-for="user in userList">
          <div style="font-size: 3vw;">{{ user.nickName }}：{{ user.score }}</div>
          <div style="margin: 0vw;">
            <el-button size="mini" type="success" @click="dui(user)" v-show="answerNumber<topicList.length"
                       :disabled="sub||flagOver||answerNumber>=showNumber"
                       style="font-size: 2vw;margin: 10px 2px;">正确
            </el-button>
            <el-button size="mini" type="danger" @click="cuo(user)" v-show="answerNumber<topicList.length"
                       :disabled="sub||flagOver||answerNumber>=showNumber"
                       style="font-size: 2vw;margin: 10px 2px;">错误
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {listTopic} from "@/api/base/topic";
import {listUser} from "@/api/system/user";
import {getPaper} from "@/api/base/paper";
import {addScore, listScore} from "@/api/base/score";
import Vue from 'vue'

export default {
  name: "Race",
  dicts: ['grade', 'subject', 'answer_type', 'question_type'],
  data() {
    return {
      sub: false,
      paperId: null,
      paper: {},
      userList: [],
      topicList: [],
      topicTotal: 0,
      topic: {},

      showNumber: 1,
      answerNumber: 0,
      showAnswer: false,
      scoreForm: {},

      scoreList: [],
      flagOver: false,
      load: null,
      timer: null,
      countList: [[], []],
      countdown: 10,
    };
  },
  created() {
    const paperId = this.$route.params && this.$route.params.paperId;
    this.paperId = paperId;
    this.getUserList().then(v1 => {
      this.getPaperData().then(v2 => {
        this.getTopicList().then(v3 => {
          this.res();
        });
      });
    });
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    getUserList() {
      return Promise.resolve(
        listUser({pageNum: 1, pageSize: 10000000}).then(response => {
          this.userList = response.rows.filter(d => d.deptId == 105);
        })
      );
    },
    getPaperData() {
      return Promise.resolve(
        getPaper(this.paperId).then(response => {
          this.paper = response.data;
          this.countList[0][0] = this.paper.mustFillTime;
          this.countList[0][1] = this.paper.mustChoiceTime;
          this.countList[0][2] = this.paper.mustSayTime
          this.countList[0][3] = this.paper.mustExplainTime
          this.countList[1][0] = this.paper.lootFillTime
          this.countList[1][1] = this.paper.lootChoiceTime
          this.countList[1][2] = this.paper.lootSayTime
          this.countList[1][3] = this.paper.lootExplainTime
        })
      );
    },
    getTopicList() {
      return Promise.resolve(
        listTopic({paperId: this.paperId, pageNum: 1, pageSize: 10000000}).then(response => {
          this.topicList = response.rows;
          this.topicTotal = response.total;
          this.topic = this.topicList[0];
        }));
    },
    pre() {
      this.showNumber = this.showNumber - 1;
      this.topic = this.topicList[this.showNumber - 1];
      this.showAnswer = false;
      this.sub = false;
    },
    nex() {
      this.showNumber = this.showNumber + 1;
      this.topic = this.topicList[this.showNumber - 1];
      this.showAnswer = false;
      this.sub = false;
    },
    dui(user) {
      this.submit(user, "1");
      this.load = this.$loading({text: "恭喜！"});
    },
    cuo(user) {
      this.submit(user, "2");
      this.load = this.$loading({text: "加油！"});
    },
    submit(user, answerResult) {
      this.sub = false;
      this.showAnswer = false;
      let score = this.getScore();
      if (answerResult == "2") {
        score = this.topic.answerType == '1' ? 0 : -score;
      }
      this.scoreForm = {
        paperId: this.paperId,
        topicId: this.topic.topicId,
        userId: user.userId,
        answerResult: answerResult,
        score: score
      };
      addScore(this.scoreForm).then(v1 => {
        this.ping(user.userId);
        setTimeout(() => {
          this.res();
        }, 1000);
      });
    },
    ping(userId) {
      this.userList.filter(d => d.userId != userId).forEach(d => {
        this.scoreForm = {
          paperId: this.paperId,
          topicId: this.topic.topicId,
          userId: d.userId,
          answerResult: "3",
          score: 0
        };
        addScore(this.scoreForm);
      })
    },
    getScore() {
      if (this.topic.answerType == "1") {
        if (this.topic.questionType == "1") {
          return this.paper.mustFillScore;
        }
        if (this.topic.questionType == "2") {
          return this.paper.mustChoiceScore;
        }
        if (this.topic.questionType == "3") {
          return this.paper.mustSayScore;
        }
        if (this.topic.questionType == "4") {
          return this.paper.mustExplainScore;
        }
      }
      if (this.topic.answerType == "2") {
        if (this.topic.questionType == "1") {
          return this.paper.lootFillScore;
        }
        if (this.topic.questionType == "2") {
          return this.paper.lootChoiceScore;
        }
        if (this.topic.questionType == "3") {
          return this.paper.lootSayScore;
        }
        if (this.topic.questionType == "4") {
          return this.paper.lootExplainScore;
        }
      }
    },
    res() {
      this.userList.forEach(d => {
        Vue.set(d, "score", 0);
      });
      listScore({paperId: this.paperId, pageSize: 1000000}).then(response => {
        this.scoreList = response.rows;
        const maxTopicId = Math.max.apply(null, this.scoreList.map(item => {
            return item.topicId
          }
        ));
        this.answerNumber = this.topicList.filter(t => t.topicId == maxTopicId)[0].number;
        this.showNumber = this.answerNumber + 1;
        this.topic = this.topicList[this.showNumber - 1];
        if (this.load) this.load.close();
        this.daojishi();
        this.checkOver();
        this.userList.forEach(d => {
          let score = 0;
          this.scoreList.filter(s => s.userId == d.userId).forEach(c => {
            score += c.score;
          })
          Vue.set(d, "score", score);
        });
      });
    },
    daojishi() {
      this.countdown = this.countList[this.topic.answerType - 1][this.topic.questionType - 1];
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    checkOver() {
      if (this.answerNumber >= this.topicList.length) {
        this.flagOver = true;
      }
    },

    toggleFullScreen() {
      if (!document.fullscreenElement) {
        this.enterFullScreen();
      } else {
        this.exitFullScreen();
      }
    },
    enterFullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
      }
    },
  }
};
</script>
<style>
html {
  background-color: #EEBF74;
}

.v-enter, .v-leave-to {
  opacity: 0;
  transform: translateY(90px);
}

.v-enter-active, .v-leave-active {
  transition: all 1s ease;
}

.v-move {
  transition: all 1s ease;
}

.v-leave-active {
  position: absolute;
  width: 75%;
}
</style>
